<%--
  Created by IntelliJ IDEA.
  User: kangx
  Date: 2020/8/7
  Time: 23:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改员工</title>
    <link rel="stylesheet" href="${AppPath}/css/font.css">
    <link rel="stylesheet" href="${AppPath}/css/index.css">
    <script src="${AppPath}/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${AppPath}/js/index.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form" lay-fiter="empForm">
            <div class="layui-form-item">
                <label for="empName" class="layui-form-label">
                    <span class="x-red">*</span>姓名
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="empName" name="empName" lay-fiter="empName" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>性别</label>
                <div class="layui-input-inline" id="sexDiv">

                </div>
            </div>

            <div class="layui-form-item">
                <label for="empAge" class="layui-form-label">
                    <span class="x-red"></span>年龄
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="empAge" name="empAge"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red"></span>
                </div>
            </div>



            <div class="layui-form-item">
                <label for="empPhone" class="layui-form-label">
                    <span class="x-red">*</span>电话
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="empPhone" name="empPhone" required="" lay-verify="phone"
                           autocomplete="off" class="layui-input">
                    <input type="hidden" name="empId" id="empId">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="deptId" class="layui-form-label">
                    <span class="x-red">*</span>院系
                </label>
                <div class="layui-input-inline">
                    <select name="deptId" lay-verify="required" lay-filter="deptId" id="deptId">
                        <option value="">请选择</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="deptId" class="layui-form-label">
                    <span class="x-red"></span>照片
                </label>
                <div class="layui-input-inline" style="height:20px;padding-top: 9px ">
<%--                    <input type="file" name="img" id="img">--%>
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" name="img"  id="img">上传图片</button>
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597321489177&di=5af639d36c48f963386520fd8ee14bcb&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F25%2F20180425000646_fsmLS.thumb.700_0.jpeg" id="demo1" style="width: 100px">
                            <p id="demoText"></p>
                        </div>
                    </div>

                </div>

                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red"></span>
                </div>
            </div>

            <br/><br/><br/><br/><br/><br/><br/>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red"></span>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <button  class="layui-btn" lay-filter="update" lay-submit="">
                    修改
                </button>
            </div>
        </form>
    </div>
</div>
<script>

    function child(obj) {
        //这样就把主窗体的值放到iframe层的隐藏控件了
        //你也可以直接拿到obj完成你的需求
        // alert(JSON.stringify(obj))
        layui.use(['form','upload'],function(){
            var form = layui.form;
            var upload=layui.upload;


            //普通图片上传
            var uploadInst = upload.render({
                elem: '#img'
                ,url: '${AppPath}/emp/updateImgById' //改成您自己的上传接口
                ,data:{empId:obj.empId}
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                ,done: function(res){
                    var data=res.resp;
                    //如果上传失败
                    if(data!='ok'){
                        return layer.msg('上传失败');
                    }
                    //上传成功
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });



            layui.$.ajax({
                url:"${AppPath}/dept/findAll",
                type:"post",
                success:function(resp){
                    layui.$.each(resp,function (index,dept) {
                        if (obj.deptId!=null){
                            if (dept.deptId==obj.deptId.deptId){
                                var str='<option value="'+dept.deptId+'" selected >'+dept.deptName+'</option>';
                            }else{
                                var str='<option value="'+dept.deptId+'">'+dept.deptName+'</option>';
                            }
                        }else{
                            var str='<option value="'+dept.deptId+'">'+dept.deptName+'</option>';
                        }
                        layui.$("#deptId").append(str)
                    })
                    form.render();
                }
            })
            layui.$("#empName").val(obj.empName);
            layui.$("#empAge").val(obj.empAge);
            layui.$("#empPhone").val(obj.empPhone);
            layui.$("#empId").val(obj.empId);
            var str="";
            if (obj.empSex=='男'){
                str+='男 <input type="radio" name="empSex" required="" value="男"  autocomplete="off" class="layui-input" checked>'
                str+='女 <input type="radio" name="empSex" required="" value="女"  autocomplete="off" class="layui-input">'
                layui.$("#sexDiv").html(str);
            }else{
                str+='男 <input type="radio" name="empSex" required="" value="男"  autocomplete="off" class="layui-input" >'
                str+='女 <input type="radio" name="empSex" required="" value="女"  autocomplete="off" class="layui-input"checked>'
                layui.$("#sexDiv").html(str);
            }

            // 提交表单
            form.on('submit(update)', function(data){
                console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                // alert(JSON.stringify(data.field))
                layui.$.ajax({
                    url:"${AppPath}/emp/updateById",
                    data:data.field,
                    type:"post",
                    success:function (resp) {
                        // var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        if (resp=='ok'){
                            layer.msg('修改成功！',{
                                icon: 1,
                                time: 1000 //2秒关闭（如果不配置，默认是3秒）
                            },function(){
                                parent.location.reload();
                            });
                        }else{
                            layer.msg('请稍后再试！', {
                                icon: 2,
                                time: 1000 //2秒关闭（如果不配置，默认是3秒）
                            });
                        }
                    }
                })
                 return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        });

    }
</script>
</body>
</html>
